<template>
  <div>
    <ls-table :data="data" :columns="columns"></ls-table>
  </div>
</template>
<script>
import LsTable from "../components/table-render/table";
export default {
  data() {
    return {
      editIndex: -1, // 当前聚焦的输入框的行数
      editName: "", // 第一列输入框
      editAge: "", // 第二列输入框
      editBirthday: "", // 第三列输入框
      editAddress: "", // 第四列输入框
      columns: [
        {
          key: "name",
          title: "姓名",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [
                h("input", {
                  domProps: {
                    value: row.name
                  },
                  on: {
                    input: event => {
                      this.editName = event.target.value;
                    }
                  }
                })
              ];
            } else {
              edit = row.name;
            }
            return h("div", edit);
          }
        },
        {
          key: "age",
          title: "年龄",
          render: (h, { row, index }) => {
            let edit;

            // 当前行为聚焦行时
            if (this.editIndex === index) {
              edit = [
                h("input", {
                  domProps: {
                    value: row.age
                  },
                  on: {
                    input: event => {
                      this.editAge = event.target.value;
                    }
                  }
                })
              ];
            } else {
              edit = row.age;
            }

            return h("div", [edit]);
          }
        },
        {
          key: "birthday",
          title: "出生日期",
          // eslint-disable-next-line no-unused-vars
          render: (h, { row, column, index }) => {
            let edit;

            // 当前行为聚焦行时
            if (this.editIndex === index) {
              edit = [
                h("input", {
                  domProps: {
                    value: row.birthday
                  },
                  on: {
                    input: event => {
                      this.editBirthday = event.target.value;
                    }
                  }
                })
              ];
            } else {
              const date = new Date(parseInt(row.birthday));
              const year = date.getFullYear();
              const month = date.getMonth() + 1;
              const day = date.getDate();

              edit = `${year}-${month}-${day}`;
            }

            return h("div", [edit]);
          }
        },
        { key: "address", title: "地址", render: (h, { row, index }) => {
          let edit;
          if(this.editIndex === index){
            edit = [h('input', {
              domProps: {
                value: row.address
              },
              on: {
                input: (e) => {
                  row.address = e.target.value
                }
              }
            })]
          }else{
            edit = row.address
          }
          return h('div', [edit])
        } },
        {
          key: "option",
          title: "操作",
          render: (h, { row, index }) => {
            if (this.editIndex === index) {
              return [
                h(
                  "button",
                  {
                    on: {
                      click: () => {
                        this.data[index].name = this.editName;
                        this.data[index].age = this.editAge;
                        this.data[index].birthday = this.editBirthday;
                        this.data[index].address = this.editAddress;
                        this.editIndex = -1;
                      }
                    },
                    style: {
                      marginRight: "6px"
                    }
                  },
                  "保存"
                ),
                h(
                  "button",
                  {
                    on: {
                      click: () => {
                        this.editIndex = -1;
                      }
                    }
                  },
                  "取消"
                )
              ];
            } else {
              return h(
                "button",
                {
                  on: {
                    click: () => {
                      this.editName = row.name;
                      this.editAge = row.age;
                      this.editAddress = row.address;
                      this.editBirthday = row.birthday;
                      this.editIndex = index;
                    }
                  }
                },
                "修改"
              );
            }
          }
        }
      ],
      data: [
        {
          age: "12",
          name: "王者",
          address: "北京市朝阳区芍药居",
          birthday: "919526400000"
        },
        {
          age: "12",
          name: "王者",
          address: "北京市朝阳区芍药居",
          birthday: "919526400000"
        },
        {
          age: "12",
          name: "王者",
          address: "北京市朝阳区芍药居",
          birthday: "919526400000"
        },
        {
          age: "12",
          name: "王者",
          address: "北京市朝阳区芍药居",
          birthday: "919526400000"
        },
        {
          age: "12",
          name: "王者",
          address: "北京市朝阳区芍药居",
          birthday: "919526400000"
        }
      ]
    };
  },
  components: {
    LsTable
  }
};
</script>
<style scoped>
</style>